<script setup lang='ts'>
import { useBirdStore } from '@/stores/bird'
// import { defineProps } from 'vue';
// import{ getBirdInfoByIdService } from '@/api/birds'

const props = defineProps<{
  birdId: number;
}>();

const birdStore = useBirdStore()

// TODO 这里需要考虑一下如果pinia里的存储没有及时更新怎么办
// //定义一个对象用来存放获取到的鸟类信息
// const birdInfo = ref({
//   id: 0,
//   name: '',
//   species: '',
//   habits: '',
//   morphologyAndFeatures: '',
//   description: '',
//   growthAndDistribution: '',
//   imageUrl: '',
//   soundUrl: '',
//   createdAt: '',
//   updatedAt: ''
// })

// //判断传过来的birdId是否和缓存中的birdId一致，若不一致则调用后端接口获取对应鸟类信息并刷新缓存
// if(birdStore.birdId != props.birdId){

//   let result = await getBirdInfoByIdService(props.birdId)

//   if(result.code == 200){
    
//     birdInfo.value = result.data

//     birdStore.setId(birdInfo.value.id)
//     birdStore.setName(birdInfo.value.name)
//     birdStore.setSpecies(birdInfo.value.species)
//     birdStore.setHabits(birdInfo.value.habits)
//     birdStore.setMorphologyAndFeatures(birdInfo.value.morphologyAndFeatures)
//     birdStore.setDescription(birdInfo.value.description)
//     birdStore.setGrowthAndDistribution(birdInfo.value.growthAndDistribution)
//     birdStore.setImageUrl(birdInfo.value.imageUrl)
//     birdStore.setSoundUrl(birdInfo.value.soundUrl)
//     birdStore.setCreatedAt(birdInfo.value.createdAt)
//     birdStore.setUpdatedAt(birdInfo.value.updatedAt)

//   }else{
//     ElMessage.error(result.msg ? result.msg : '获取鸟类信息失败')
//   }

// }

// const formatDescription = (description) => {
//   return description.replace(/\n/g, "<br>"); // 将换行符替换为 HTML 的换行标签
// }

</script>

<template>
    <div class="container" v-html="birdStore.bird.description">
    </div>
    <!-- <div v-html="formatDescription(birdInfo.description)"></div> -->
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* margin: 10px; */
  /* padding: 10px; */
}
</style>